Pseudo-elements like ::before, ::after, ::first-letter, and ::first-line behave similarly to real elements in terms of CSS inheritance. They inherit properties from their parent element where applicable, but not all CSS properties are inherited by default.

Key Points

1
Pseudo-elements inherit text-related properties such as color, font-family, font-size, and line-height from their parent element.
2
Non-inheritable properties, like margin, padding, border, or background, must be explicitly set on the pseudo-element.
3
Some pseudo-elements, like ::first-letter and ::first-line, may have special inheritance rules defined by the CSS specification.
4
Using inherit explicitly in CSS allows you to force any property to inherit from the parent, even if it’s not naturally inheritable.

Example: Inheritance in ::before

In this example, the ::before pseudo-element inherits the color from the <p> element, so the star appears in teal. Properties like font-weight are explicitly set because they do not inherit by default.

Best Practices

1
Understand which CSS properties are inherited and which are not when styling pseudo-elements.
2
Use explicit declarations for non-inherited properties to ensure consistent rendering.
3
Combine inherited and explicitly set properties for flexible, maintainable styling.
4
Test across browsers to verify that inheritance behaves as expected for different pseudo-elements.

Difficulty: 8/10

Topics: pseudo-elements, inheritance, CSS specificity

Scenario Questions

0-2 years experience

1
You're trying to add a star icon after a rating using ::after, but it's not showing up at all — what’s the most likely reason?
2
I set font-size: 16px on a paragraph, and I expect the ::before icon to match it, but it’s tiny — why?
3
I added content: '★' to a ::before, but it’s not aligning with the text — what CSS properties do I need to set explicitly?

2-5 years experience

1
Our tooltip component uses ::after for the arrow, but when we switched to a new theme system, the arrow color broke — what’s likely going wrong with inheritance?
2
A designer says the ::before badge on our buttons is inheriting the wrong background color — we didn’t set it explicitly. How do you debug this?
3
We have a reusable component that uses ::after for a decorative separator, but it’s rendering differently in a modal vs. the main page — what CSS inheritance rules could be causing this?

5-8 years experience

1
We’re building a scalable design system with pseudo-element icons, but we’re seeing performance jank on mobile when animating ::before/::after — how do you optimize this without losing flexibility?
2
How would you design a CSS architecture that allows pseudo-elements to reliably inherit theme variables across nested components without requiring redundant declarations?
3
A legacy component uses ::after for tooltips with hardcoded colors — we want to migrate to a token-based system. What are the risks, and how do you ensure backward compatibility?

8+ years experience

1
We’re standardizing our UI across 12 product teams, and some are using pseudo-elements for critical UI cues — how do you enforce consistent inheritance behavior without over-constraining designers?
2
Our CSS-in-JS library doesn’t support pseudo-element theming well — how would you architect a solution that allows dynamic pseudo-element styling via theme context without breaking SSR or hydration?
3
A major accessibility audit found that pseudo-element icons used for status indicators aren’t exposed to screen readers — how do you redesign this at the architecture level to meet WCAG without rewriting every component?

Follow-up Questions

❓What happens if you try to set color on a parent but not on ::before?
❓Can you inherit font-size from a parent into a pseudo-element?
❓Why might a ::after element not respond to a CSS variable defined on its parent?